body {
	display: flex;
	flex-direction: column;
	main {
		display: flex;
		justify-content: center;
		flex-grow: 1;
		color: #fff;
		background-color: black;
		.videobox {
			position: relative;
			#video {
				width: 100%;
				height: 100%;
			}
			h1 {
				position: absolute;
				bottom: 70px;
				left: 20px;
			}
			p {
				position: absolute;
				bottom: 40px;
				left: 20px;
			}
		}
	}
	// 按钮
	.progress-btn {
		height: 100px;
		line-height: 100px;
		display: flex;
		justify-content: space-around;
		.iconfont {
			font-size: 50px;
		}
	}
	// 进度条
	.progress-width {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0%;
		height: 100px;
		background-color: #5898e6;
		z-index: -1;
	}
	// 蒙层
	#mask {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 100, 200, 0.5);
		display: none;
	}
	// 蒙层按钮
	#maskBtn {
		position: fixed;
		width: 100%;
		top: 37%;
		left: 0;
		display: flex;
		justify-content: space-around;
		display: none;

		// 继续按钮
		.continue-btn {
			text-align: center;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: #70e3c2;
			color: #fff;
			.icon-continue {
				font-size: 30px;
				line-height: 60px;
			}
			span {
				display: block;
			}
		}
		// 暂停按钮
		.pause-btn {
			text-align: center;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: #ff715e;
			color: #fff;
			.icon-finish {
				font-size: 30px;
				line-height: 60px;
			}
			span {
				display: block;
			}
		}
	}
	// slogn
	.slogn {
		position: fixed;
		top: 20px;
		left: 20%;
		color: #fff;
		font-size: 20px;
		display: none;
	}
}
